<!--
 * @Author: CJF
 * @Email: 1757818940@qq.com
 * @Date: 2022-02-24 16:20:40
 * @LastEditTime: 2022-03-01 19:29:48
 * @Description: 
-->
<template>
  <div class="loginpage">
     <advcom v-if="isShow" @change='changeShow'></advcom>
    <div class="wrap" v-else>
    <div class="loginbox">
      <div class="logo"></div>
      <div class="inputbox">
        <input
          type="search"
          placeholder="请输入手机号"
          v-model="loginObj.phone"
        />
      </div>
      <div class="inputbox">
        <input type="text" placeholder="请输入验证码" v-model="loginObj.code" />
        <span class="getcode" @click="getCode">{{timeTip}}</span>
      </div>
      <van-checkbox v-model="isRember" checked-color="#ee0a24" class="isrem"
        ><p>七天免登录</p></van-checkbox
      >
      <van-button color="#ed3d30" class="loginBtn" block :loading='loading'  loading-text="登录中..." 
      :disabled='!/^1[3-9][0-9]{9}$/.test(this.loginObj.phone)||loginObj.code.length!=4  ' @click="loginEvt()">登录</van-button>
      <router-link to="/register" class="goreg">没有账号？去注册</router-link>
    </div>
    <div class="copy">
      Copyright &copy; 1998-2022 ZhangSan.All Rights Reserved
    </div>
    </div>
  </div>
</template>
<script>
import  advcom from './adv.vue'
import loginApi from '../../apis/loginApis'
export default {
  components:{
    advcom,
  },
  data() {
    return {
      loginObj: {
        phone: "",
        code: "",
      },
      isShow:true,
      timeTip:'获取验证码',
      timeout: 60,
      isRember: false,
      newCode:'',
      loading:false
    };
  },
 async created() {
    this.loginObj.phone = localStorage.getItem('phone')
    let _data = JSON.parse(localStorage.getItem('user'))
  //  loginApi.setUser = _data
    let res= await loginApi.setUser(_data)
    //  console.log(res.code)
      this.isShow = this.$store.getters['welfareah/getLoginAdv']
  },
 methods: {
   changeShow(data){
      this.isShow = data //关闭广告
    },
  async loginEvt(){
      if(this.newCode != this.loginObj.code){
         this.$toast.fail('验证码不正确')
         return
      }
      this.loading = true
      let result = await loginApi.login(this.loginObj.phone)
      if(result.code !== 200){
         this.$toast.fail(result.msg)
         this.loading = false 
         return
      }
      this.$store.commit('welfareah/setToken',result.token)
       sessionStorage.setItem('token',result.token)
     
     localStorage.setItem('phone',this.loginObj.phone)
        localStorage.setItem('user',JSON.stringify(result.data.rows))
      if(this.isRember){
        this.$store.commit('welfareah/setUserinfo',result.data.rows)
        localStorage.setItem('isauto','true')
        localStorage.setItem('token',result.token)
      }else{
        localStorage.removeItem('token')
      }
      
      // console.log(12222)
      this.$store.commit('welfareah/setUserinfo',result.data.rows)
      this.$router.push('/home')
   },
   async getCode(){
      if( this.timeTip != '获取验证码') return
      if(!/^1[3-9][0-9]{9}$/.test(this.loginObj.phone)){
       this.$toast.fail('请输入正确的手机号')
       return
      }
        this.codeTip(Date.now())
        let result = await loginApi.getCode()
        if(result.code == 200){
          this.$toast.success(`你的验证码为：${result.data.codeNum}`)
          this.newCode = result.data.codeNum
        }else{
          this.$toast.fail('获取验证码失败，请重试')
        }

    },
    codeTip(date){
        let num = Math.ceil(( Date.now()-date)/1000)
        
        setTimeout(()=>{
          let time = this.timeout-num
         if(num<this.timeout){
            this.timeTip=`重新获取(${time}s)`
            this.codeTip(date)
         }else{
             this.timeTip='获取验证码'
         }
        },100)
    }
  },
};
</script>




<style lang="less" scoped>
.loginpage{
   display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}
.wrap {
  display: flex;
  height: 100%;
  width: 100%;
  position: fixed;
  background: #ededed;
  box-sizing: border-box;
  padding-top: 16vh;
  padding-bottom: 20px;
  padding: 16vh 10px 20px;
  flex-direction: column;
  .loginbox {
    flex: 1;
    .logo {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      background: url(../../images/logo.png) no-repeat center center;
      background-size: 100% 100%;
      margin-bottom: 50px;
    }
    .inputbox {
      display: flex;
      height: 34px;
      border-radius: 20px;
      background-color: #fff;
      margin-top: 30px;
      padding: 2px 15px;
      font-size: 0.7rem;
      input {
        flex: 1;
        width: 0;
        height: 30px;
        border: none;
        background: transparent;
      }
      .getcode {
        font-size: 0.7rem;
        color: #4c4a4a;
        line-height: 30px;
        border-left: 1px solid #bfb3b3;
        padding-left: 10px;
      }
    }
    .isrem {
      font-size: 0.7rem;
      margin-top: 10px;
      margin-left: 10px;
      margin-bottom: 20px;

      p {
        color: #656a6a;
      }
    }
    .loginBtn {
      border-radius: 5px;
    }
    .goreg {
      margin-top: 20px;
      display: block;
      font-size: 0.6rem;
      text-align: center;
      color: #ed3d30;
      text-decoration: underline;
      &:active {
        color: #ed3d30;
      }
    }
  }
  .copy {
    width: 100%;
    color: #ccc;
    font-size: 0.5rem;
    text-align: center;
  }
}
</style>